<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="../Master/MasterPage.xhtml">
            <ui:define name="isa1">
                <script language="javascript" type="text/javascript">
                    $(document).ready(function () {
                        $("#closeDetailsOr").click(function () {
                            $(".vieer-position").hide('slow');
                            return false;
                        });
                    });
                </script>
                <style type="text/css">
                    .vieer-position{
                        position: fixed;
                        width: 500px;
                        background-color: #fff;
                        right: 0px;
                        radius:3px;
                        border-radius:3px;
                        -moz-border-radius: 5px;
                        bottom: 0px;
                        font-size: 13px; 
                        font-family: verdana;
                        z-index: 9090;
                    }
                    .vieer-position table tr td{
                        text-align: center;

                    }
                    .sppadding{
                        line-height: 1.5em;
                    }
                    .vieer-position table{
                    }
                </style>
                <h:outputText value="#{orders_Index.message}" escape="false"/>
                <div class="t-title">
                    <h3><img src="../Iconpage/master/tag.png "/>&nbsp;MANAGER ORDERS</h3>
                    <div class="t-in">  
                        <p:dataTable id="dataTable" var="listOrder" value="#{orders_Index.listOrder}"  
                                     paginator="true" rows="10"  
                                     paginatorTemplate="{CurrentPageReport}  
                                     {FirstPageLink} {PreviousPageLink}
                                     {PageLinks} {NextPageLink}
                                     {LastPageLink}
                                     {RowsPerPageDropdown}"  
                                     rowsPerPageTemplate="10,30,50">  
                            <p:column>  
                                <f:facet name="header">  
                                    <h:outputText value="Account User" />  
                                </f:facet>  
                                <h:commandLink value="#{listOrder.userAccount}" style="color: #333;" />
                            </p:column> 
                            <p:column filterBy="#{listOrder.orderID}" filterMatchMode="contains">  
                                <f:facet name="header">  
                                    <h:outputText value="Orders Code" />  
                                </f:facet>  
                                <h:outputText value="#{listOrder.orderID}" />  
                            </p:column> 
                            <p:column>  
                                <f:facet name="header">  
                                    <h:outputText value="Ship Name" />  
                                </f:facet>  
                                <h:outputText value="#{listOrder.shipName}" />  
                            </p:column>
                            <p:column>  
                                <f:facet name="header">  
                                    <h:outputText value="Order Date" />  
                                </f:facet>  
                                <h:outputText value="#{listOrder.orderDate}" />  
                            </p:column> 
                            <p:column>  
                                <f:facet name="header">  
                                    <h:outputText value="Ship Status" />  
                                </f:facet>  
                                <h:commandButton class="statusorder-#{listOrder.shipStatus} samestto" 
                                                 value="#{orders_Index.orderStyle(listOrder.shipStatus)}"
                                                 action="#{orders_Index.handlingStatus(listOrder.orderID, listOrder.shipStatus)}"
                                                 onclick="return updateConfirm();"/>&nbsp;
                                <h:commandLink value="View" class="a_showDetailst" 
                                               action="#{orders_Index.viewDetailsUI(listOrder.orderID,listOrder.shipAddress,listOrder.foneNumber)}"/>
                            </p:column> 
                        </p:dataTable>  
                        <div class="vieer-position" style="display: #{orders_Index.displayor}"> 
                            <div class="t-title">
                                <h3>Orders Details<a id="closeDetailsOr" style="margin-left: 350px;
                                                     padding-left: 10px; padding-right: 10px" href="#">X</a></h3>
                                <div class="t-in" style="min-height: 320px">
                                    <span class="sppadding">Code:</span>&nbsp;<span style="font-weight: 600">#{orders_Index.scode}</span> <br/>
                                    <span class="sppadding">Address:</span>&nbsp; #{orders_Index.shipaddress}<br/>
                                    <span class="sppadding">Fone:</span>&nbsp; #{orders_Index.fone}<br/>
                                    <table cellpadding="0" cellspacing="2" align="center" width="100%">
                                        <tr>
                                            <th width="300px">
                                                Disc
                                            </th>
                                            <th>
                                                Price
                                            </th>
                                            <th>
                                                Quantity
                                            </th>
                                            <th>
                                                Cash
                                            </th>
                                        </tr>
                                        <ui:repeat value="#{orders_Index.listOrderDetails}" 
                                                   var="oDetails">
                                            <tr>
                                                <div style="border-bottom: 2px solid #dc5b21">
                                                    <td>
                                                        #{oDetails.albumName}
                                                    </td>
                                                    <td>
                                                        $ #{oDetails.unitPrice}
                                                    </td>
                                                    <td>
                                                        #{oDetails.quantity}
                                                    </td>
                                                    <td>
                                                        $ #{orders_Index.caculateMomey(oDetails.unitPrice, oDetails.quantity)}
                                                    </td>
                                                </div>
                                            </tr>
                                        </ui:repeat>
                                        <tr>
                                            <td colspan="4" align="right" style="font-weight: 600; 
                                                padding-left: 330px; color: red">
                                                <div style="border-bottom: 2px solid #dc5b21"></div>
                                                Total Money:&nbsp; $#{orders_Index.totalMoney}
                                            </td>

                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

